<template>
	<header>
		<div class="header-weather">
			<img :src="headerInfo.weather.icon"/>
			<div class="header-weather-des">
				<span v-text="headerInfo.weather.wep"></span>
				<span v-text="headerInfo.weather.wind"></span>
			</div>
		</div>
		<div class="header-title">
			<div class="title" v-text="headerInfo.title || '智慧管网监测系统'"></div>
		</div>
		<div class="header-date">
			<div class="header-dater-des">
				<span v-text="headerInfo.dater.week"></span>
				<span v-text="headerInfo.dater.date"></span>
			</div>
			<div class="line"></div>
			<span class="header-titme" v-text="headerInfo.dater.time"></span>
		</div>
	</header>
</template>

<script>
import {BigScreen} from "../../datastore/BigScreen";
export default {
	components: {},
	props: {},
	data() {
		return {
			headerInfo: {
				weather: {
					icon: require("@/assets/images/marker_1_1.png"),
					wep: "多云",
					wind: "西北风2~3级",
				},
				title: "",
				dater: {
					time: "00:00",
					date: "xxxx-xx-xx",
					week: "xx",
				},
			},
		};
	},
	methods: {
		getWeek(week) {
			// 参数时间戳
			switch (week) {
				case "1":
					return "周一";
				case "2":
					return "周二";
				case "3":
					return "周三";
				case "4":
					return "周四";
				case "5":
					return "周五";
				case "6":
					return "周六";
				case "0":
					return "周日";
			}
		},
	},
	mounted() {
		var that = this;
		new BigScreen(this).getSystenInfo({},(res)=>{
			that.headerInfo.title = res.datas.system_big_screen_title;
		})
	},
	beforeMount() {
		this.timeTimer = setInterval(() => {
			let curDateTime = this.$moment().format("d,YYYY.MM.DD,HH:mm:ss");
			let s = curDateTime.split(",");
			this.headerInfo.dater.date = s[1];
			this.headerInfo.dater.week = this.getWeek(s[0]);
			this.headerInfo.dater.time = s[2];
		}, 1000);
	},
	beforeUnmount() {
		if (this.timeTimer) {
			clearInterval(this.timeTimer); // 在Vue实例销毁前，清除我们的定时器
		}
	},
};
</script>
<style lang="scss" scoped>
header {
	user-select: none;
	height: 76px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.header-date {
		right: 0;
		flex-direction: row-reverse;
	}

	.header-weather,
	.header-date {
		position: absolute;
		width: 200px;
		display: flex;
		align-items: center;
		padding-bottom: 10px;
		box-sizing: border-box;

		img {
			margin-left: 20px;
			width: 34px;
			height: 34px;
		}

		.header-weather-des {
			padding-left: 10px;
			display: flex;
			flex-direction: column;

			span:nth-child(1) {
				font-size: 16px;
				font-weight: bold;
			}

			span:nth-child(2) {
				margin-top: 5px;
				font-size: 12px;
			}
		}

		.header-titme {
			font-size: 32px;
			padding-right: 10px;
		}

		.line {
			width: 1px;
			height: 24px;
			background: #ffffff;
			opacity: 0.5;
		}

		.header-dater-des {
			margin-right: 20px;
			padding-left: 10px;
			display: flex;
			flex-direction: column;

			span:nth-child(1) {
				font-size: 12px;
			}

			span:nth-child(2) {
				margin-top: 5px;
				font-size: 12px;
			}
		}
	}

	.header-title {
		background-image: url('../../assets/images/home/title_bg.svg');
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		height: 100%;
		flex: 1;

		img {
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			top: 0;
			bottom: 0;
			object-fit: cover;
		}

		.title {
			font-family: lyndon;
			line-height: 30px;
			text-align: center;
			font-size: 36px;
			margin-top: 24px;
			background-image: linear-gradient(
					180deg,
					#ffffff 0%,
					#7ab2e6 55%,
					#ffffff 100%
			);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}
	}
}
</style>
